<template>
  <div>
    <Header active-index="6" />
    <!-- Breadcrumb Start -->
    <div class="main-bg">
      <div class="subbox">
        <h2 class="title">联系我们</h2>
        <div class="navbox">
          <ul>
            <li><i class="el-icon-arrow-right" />首页</li>
            <li class="active"><i class="el-icon-arrow-right" /> 联系我们 </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- Iconbox Start -->
    <section class="iq-blog-section light-gray-bg">
      <div class="container">
        <el-row>
          <el-col :span="24">
            <h2 class="iq-title" style="color: #0d1e67">联系方式</h2>
          </el-col>
        </el-row>
        <div class="row">
          <div class="col-lg-3  col-md-4">
            <img :src="$imgURL+'qq.png'" class="img-fluid mb-3">
          </div>
          <div class="col-lg-9  col-md-8">
            <div class="iq-icon-box iq-icon-box-style-2 text-left">

              <div class="icon-box-img">
                <i class="el-icon-message" />
              </div>

              <div class="icon-box-content">
                <h5 class="icon-box-title">西安交通大学链上能源交易系统邮箱</a> </h5>
                <p class="icon-box-desc">xjtu_ebc@163.com</p>
              </div>

            </div>
            <div class="iq-icon-box iq-icon-box-style-2 text-left ">
              <div class="icon-box-img">
                <i aria-hidden="true" class="el-icon-phone-outline" />
              </div>

              <div class="icon-box-content">
                <h5 class="icon-box-title">QQ群号</h5>

                <p class="icon-box-desc">910103948</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="container">
        <el-row>
          <el-col :span="24">
            <h2 class="iq-title" style="color: #0d1e67">在线留言</h2>
          </el-col>
        </el-row>
        <el-form>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item>
                <el-input v-model="form.name" placeholder="姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item placeholder="邮箱">
                <el-input v-model="form.email" placeholder="邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item placeholder="电话">
                <el-input v-model="form.phone" placeholder="电话"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-input v-model="form.in" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item >
            <div class="dialog-footer">
              <el-button type="primary" @click="onSubmit">发送</el-button>
              <el-button @click="onCancel">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </section>
    <section class="iq-blog-section light-gray-bg p60">
      <el-row>
        <el-col :span="24">
          <h2 class="iq-title" style="color: #0d1e67">公告</h2>
        </el-col>
      </el-row>
      <div id="linkW">
        <el-table :data="tableData" border style="width: 100%" stripe>
          <el-table-column prop="title" label="标题" width="180" align="center" header-align="center" />
          <el-table-column prop="content" label="内容" header-align="center" />
          <el-table-column prop="create_at" label="发布时间" width="180" align="center" header-align="center" />
        </el-table>
      </div>
    </section>
    <!-- Iconbox End -->
    <!-- Faq End -->
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/header/index.vue";
import Footer from "@/components/footer/index.vue";
import Login from "@/components/login/index.vue";
import Reg from "@/components/reg/index.vue";
import Release from "@/components/release/index.vue";
import { getAnnonce } from "@/api/contact";
export default {
  components: {
    Header,
    Footer,
    Login,
    Reg,
    Release,
  },
  data() {
    return {
      form: {
        name: "",
        email: "",
        phone: "",
        in: "",
      },
      tableData: [],
    };
  },
  mounted() {
    getAnnonce().then((res) => {
      this.tableData = res.data;
    });
  },
  methods: {
    onSubmit() {
      if (
        this.form.name == "" ||
        this.form.email == "" ||
        this.form.phone == "" ||
        this.form.in == ""
      ) {
        this.$message.warning("内容为空");
        return;
      }
      this.$message.success("发送成功");
    },
    onCancel() {
      this.form = {
        name: "",
        email: "",
        phone: "",
        in: "",
      };
    },
  },
};
</script>
<style>
</style>
